<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>LZXリファレンス lz-combobox</title>
  <othercredit role="translator">
    <firstname>Hiroyuki</firstname>
    <surname>Kato</surname>
        <contrib>2006/05/15　翻訳初版</contrib>
 </othercredit>
</head>
<body>

<!-- ===================================================================== -->
<!-- = XML information goes here                                         = -->
<!-- ===================================================================== -->
<lzelement title="Combobox">
    <lztier>LZ Component</lztier>
    <lzcategory>view</lzcategory>
    <lzshortdesc>
        comboboxは選択可能なドロップダウン形式のリストを表示します。
    </lzshortdesc>
    <lztag>lz/combobox.xml</lztag>
</lzelement>


<p><classname>combobox</classname>はテキストと連携したポップアップ形式のリストを
表示するお馴染みのUI要素です。選択されたテキストはテキストフィールドに表示されます。
このフィールドはcomboboxの<attribute>editable</attribute>属性が<code>true</code>の時に
<classname>LzInputText</classname>となります(デフォルトで<code>true</code>です)。この属性が
<code>false</code>の場合には<classname>LzText</classname>となります。
</p>

<p>combobox内に表示されるアイテムの数は<attribute>shownitems</attribute>
属性に値を入れることで設定できます。この属性値以上のアイテムが存在する場合、
スクロールバーが自動的に表示されます。</p>

<p>combobox内のアイテムリストは<attribute>text</attribute>と
<attribute>value</attribute>の属性を持つ<tagname>textlistitem</tagname>
タグを用いて作成されます。</p>

<example>
&lt;canvas width="200" height="100"&gt;
 &lt;combobox id="cbox" x="5" y="5" width="130" editable="false"&gt;
    &lt;textlistitem text="Dark Blue"  value="0x000055"/&gt;
    &lt;textlistitem text="Turquoise"  value="0x66dddd"/&gt;
    &lt;textlistitem text="Light Blue" value="0xaaddff"/&gt;
  &lt;/combobox&gt;
  &lt;view x="150" y="5" width="20" height="20"
        bgcolor="${cbox.value}"/&gt;
&lt;/canvas&gt;
</example>

<p><br/></p>
<p>
comboboxは<tagname>textlistitem</tagname>に<attribute>datapath</attribute>
属性を指定することでも作成することができます。 <attribute>shownitems</attribute>
を用いて表示するアイテムの数を設定することもできます。
</p>

<example>
&lt;canvas width="200" height="130"&gt;
  &lt;dataset name="items"&gt;
    &lt;item value="item1"&gt;item one&lt;/item&gt;
    &lt;item value="item2"&gt;item two&lt;/item&gt;
    &lt;item value="item3"&gt;item three&lt;/item&gt;
    &lt;item value="item4"&gt;item four&lt;/item&gt;
  &lt;/dataset&gt;

  &lt;combobox x="5" y="5"
            width="130"  
            shownitems="3"
            defaulttext="choose one..."  &gt;
    &lt;textlistitem datapath="items:/item" text="$path{'text()'}"
                  value="$path{'@value'}"/&gt;
  &lt;/combobox&gt;
&lt;/canvas&gt;
</example>

<p>最後に、comboboxは<classname>listitem</classname>クラスを継承したクラスを
作成することでカスタムアイテムを表示することができます。以下に例を示します。</p>

<example>
&lt;canvas width="200" height="130"&gt;
  &lt;class name="mylistitem" extends="listitem" width="100%" height="20" &gt;
   &lt;attribute name="text" value="" type="string"/&gt;
   &lt;!-- place a red square in the left hand side of mylistitem --&gt;
   &lt;view bgcolor="red" width="10" height="10" x="5" y="5"/&gt;
   &lt;!-- constrain the text to the text attribute of listitem --&gt;
   &lt;text x="20" text="${classroot.text}" fgcolor="0x4B4B4B"&gt;
   &lt;/text&gt;
  &lt;/class&gt;

  &lt;dataset name="items"&gt;
    &lt;item value="item1"&gt;item one&lt;/item&gt;
    &lt;item value="item2"&gt;item two&lt;/item&gt;
    &lt;item value="item3"&gt;item three&lt;/item&gt;
    &lt;item value="item4"&gt;item four&lt;/item&gt;
  &lt;/dataset&gt;

  &lt;combobox x="5" y="5"
            width="130" editable="false"&gt;
    &lt;mylistitem datapath="items:/item" text="$path{'text()'}"
                value="$path{'@value'}"/&gt;
  &lt;/combobox&gt;
&lt;/canvas&gt;
</example>


<p>このコンポーネントに関する詳細はガイドの<a
href="${dguide}using-components.html#using-components.combobox">Using the Laszlo
Components</a>の章を御覧下さい。</p>

</body>
</html>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2001-2004 Laszlo Systems, Inc.  All Rights Reserved.              *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->
